<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<div id="user">
				<label>
					姓名：<input type="text" value="aa"/>
				</label>
				<br />
				<label>
					年龄：<input type="number" value="18"/>
				</label>
			</div>
			<div id="sex">
				性别<br/>
				<label>
					男:<input type="radio" name="sex" value=0 checked />
				</label>	
				<label>
					女:<input type="radio" name="sex" value=1  />
				</label>
			</div>
			<div>
				<button type="button" onclick="add()">添加</button>
			</div>
			
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!-- <tr>
							<td>kky</td>
							<td>18</td>
							<td>小哥哥</td>
							
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<script>
			
			var arr= [];
			function add(){
				//查找到div#user>label 下所有input元素，返回NodeList(2) [input, input]0: input 1: input
				var userIpts= document.querySelectorAll("div#user>label input");
				//console.log(userIpts);
				var user= userIpts[0].value;//第一个input的值赋值给user
				var age= userIpts[1].value; //第二个input的值赋值给age
				var sex=getUserSex();		//sex通过函数getUserSex()获取到值	
				var obj={
							user:user,
							age:age,
							sex:sex,
						}
				arr.push(obj);
				showPage(arr);
			}
			//获取性别
			function getUserSex(){
				var sexIpts=document.querySelectorAll("div#sex>label input");
				//console.log("sexIpts:",sexIpts);
				var sex;
				if(sexIpts[0].checked){
					sex=sexIpts[0].value;
				}else{
					sex=sexIpts[1].value;
				}
				return sex;
			}
			
			//渲染页面
			function showPage(arr){
				var tbody= document.getElementById("tbody");
				//
				tbody.innerHTML="";
				var trs="";
				for (var i=0;i<arr.length;i++) {
					trs +=`
						<tr>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex=="0"?"小哥哥":"小姐姐"}</td>
							
						</tr>
					`;
					
				}
				tbody.innerHTML=trs;
			}
		</script>
	</body>
</html>
